<template>
    <div class="layout">
        <router-view />
        <van-tabbar v-model="active" route>
            <van-tabbar-item to="/" icon="home-o">首页</van-tabbar-item>
            <van-tabbar-item to="/map" icon="location-o">找房</van-tabbar-item>
            <van-tabbar-item to="/message" icon="chat-o">消息</van-tabbar-item>
            <van-tabbar-item to="/user" icon="user-o">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const active = ref(0)

// 根据当前路由设置激活的标签
const routeMap = {
    '/': 0,
    '/map': 1,
    '/message': 2,
    '/user': 3
}

active.value = routeMap[route.path] || 0
</script>

<style scoped>
.layout {
    padding-bottom: 50px;
    min-height: 100vh;
}
</style> 